<template>
	<view class="order-container">
		<!-- 订单管理 -->
		<view class="search-container">
			<el-date-picker v-model="searchParams.orderdate" type="date" placeholder="选择日期" class="date-picker"
				format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
			<el-select v-model="searchParams.orderstatus" placeholder="选择状态" class="status-select">
				<el-option label="待送达" value="待送达" />
				<el-option label="已完成" value="已完成" />
			</el-select>
			<el-button type="primary" @click="fetchOrderList">查询</el-button>
		</view>

		<!-- <view v-if="orderData" class="order-data">
			<h3>返回的数据:</h3>
			<pre>{{ orderData }}</pre>
		</view> -->

		<view class="order-table-container">
			<el-table :data="orderData?.result" border style="width: 100%">
				<el-table-column min-width="120" prop="id" label="订单ID"/>
				<el-table-column min-width="120" prop="new_orderid" label="新订单ID" />
				<el-table-column min-width="120" prop="orderstatus" label="订单状态" />
				<el-table-column min-width="120" prop="countdown" label="倒计时" />
				<el-table-column min-width="120" prop="ordertype" label="订单类型" />
				<el-table-column min-width="120" prop="addressid" label="地址ID" />
				<el-table-column min-width="120" prop="addressname" label="地址名称" />
				<el-table-column min-width="120" prop="note" label="备注" />
				<el-table-column min-width="120" prop="phone" label="电话" />
				<el-table-column min-width="120" prop="finallprice" label="总价" />
				<el-table-column min-width="120" prop="expiretime" label="过期时间" />
				<el-table-column min-width="120" prop="psTime" label="配送时间" />
				<el-table-column min-width="120" prop="createtime" label="创建时间" />
				<el-table-column min-width="120" prop="totalNum" label="总数量" />
				
				<el-table-column fixed="right" label="操作" min-width="120">
					<template #default="{ row }">
						<el-button link type="primary" size="small" @click="showOrderDetails(row)">详情</el-button>
						<el-button link type="primary" size="small" @click="printOrder(row)">打印</el-button>
					</template>
				</el-table-column>
				
			</el-table>
		</view>
		
		<!-- 订单详情抽屉 -->
				<el-drawer v-model="drawerVisible" title="订单详情" size="50%">
					<div v-if="selectedOrder">
						<el-descriptions title="订单信息" :column="2">
							<el-descriptions-item label="订单ID">{{ selectedOrder.new_orderid }}</el-descriptions-item>
							<el-descriptions-item label="状态">{{ selectedOrder.orderstatus }}</el-descriptions-item>
							<el-descriptions-item label="类型">{{ selectedOrder.ordertype }}</el-descriptions-item>
							<el-descriptions-item label="地址">{{ selectedOrder.addressname }}</el-descriptions-item>
							<el-descriptions-item label="电话">{{ selectedOrder.phone }}</el-descriptions-item>
							<el-descriptions-item label="总价">{{ selectedOrder.finallprice }}</el-descriptions-item>
							<el-descriptions-item label="创建时间">{{ selectedOrder.createtime }}</el-descriptions-item>
						</el-descriptions>
		
						<div class="meal-list">
							<h3>餐品列表</h3>
							<el-table :data="selectedOrder.meal_list" border>
								<el-table-column prop="name" label="餐品名称" />
								<el-table-column prop="price" label="单价" />
								<el-table-column prop="count" label="数量" />
								<el-table-column prop="taste" label="口味" />
								<el-table-column prop="mealdesc" label="描述" />
							</el-table>
						</div>
					</div>
				</el-drawer>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { getOrderList } from '@/api/order';
	import type { OrderListResponse, GetOrderListParams } from '@/api/types/order';
	import { ElMessage } from 'element-plus';

	// 搜索条件
	const searchParams = ref<GetOrderListParams>({
		orderdate: '2025-03-11',
		orderstatus: '待送达',
	});

	// 返回的数据
	const orderData = ref<OrderListResponse | null>(null);

	// 获取订单列表
	const fetchOrderList = async () => {
		try {
			const res = await getOrderList(searchParams.value);
			orderData.value = res;
			console.log(orderData.value);
		} catch (error) {
			ElMessage.error('网络错误，请稍后再试');
		}
	};

	// 打印订单
	const printOrder = (row : any) => {
		console.log('打印订单:', row);
		// 可以使用 window.print() 或其他打印库
	};
	// 展示订单详情
		const drawerVisible = ref(false);
		const selectedOrder = ref<Order | null>(null);
	
		const showOrderDetails = (row: Order) => {
			selectedOrder.value = row;
			drawerVisible.value = true;
		};
	// 页面加载时获取订单列表
	onMounted(() => {
		// fetchOrderList();
	});
</script>

<style scoped lang="scss">
	.order-container {
		padding: 20px;
		background-color: #fff;
		border-radius: 4px;
		width: 100%;
		display: block;
	}

	.search-container {
		display: flex;
		gap: 10px;
		margin-bottom: 20px;

		.date-picker,
		.status-select {
			width: 200px;
		}
	}

	.order-data {
		margin-top: 20px;
		padding: 10px;
		background-color: #f5f7fa;
		border-radius: 4px;
	}

	.order-table-container {
		margin-top: 20px;
	}
</style>